<template>
    <div>
        <div style="width:40%;">
            <!-- 数据展示表格 -->
            <el-table
                :data="units.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                stripe
                border
                size="small"
            >
                <el-table-column
                    type="index"
                    label="序号"
                    width="80px"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="name"
                    label="单位名称"
                    align="center"
                ></el-table-column>
                <el-table-column
                    width="150px"
                    align="center"
                >
                    <template
                        slot="header"
                        slot-scope="scope"
                    >
                        <el-button
                            type="success"
                            @click="insertVisible=true"
                            size="mini"
                            icon="el-icon-plus"
                        >新增</el-button>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.row.id)"
                            type="primary"
                        >编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页栏 -->
            <el-pagination
                layout="total, sizes, prev, pager, next, jumper"
                :total="units.length"
                :page-size="pageSize"
                :page-sizes="[5,10]"
                :current-page="currentPage"
                @current-change="changeCurrent"
                @size-change="changeSize"
                align="center"
                style="margin-top:10px"
            ></el-pagination>
        </div>
        <!-- 新增案例编辑窗口 -->
        <el-dialog
            title="新增案例"
            :visible.sync="insertVisible"
        >
            <div style="margin-bottom: 20px;">
                <label>名称：</label>
                <el-input
                    type="text"
                    v-model="name"
                ></el-input>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="insert"
                >提交</el-button>
                <el-button @click="insertVisible = false">关闭</el-button>
            </span>
        </el-dialog>
        <!-- 修改案例编辑窗口 -->
        <el-dialog
            title="修改案例"
            :visible.sync="updateVisible"
        >
            <div style="margin-bottom: 20px;">
                <label>名称：</label>
                <el-input
                    type="text"
                    v-model="currentUnit.name"
                ></el-input>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="update"
                >提交</el-button>
                <el-button @click="updateVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            units: [],
            currentPage: 1,
            pageSize: 10,
            insertVisible: false,
            updateVisible: false,
            name: "",
            currentUnit: {}
        };
    },
    methods: {
        getUnits() {
            this.$http("/cooperationUnit/getAll").then(response => {
                this.units = response.data;
            });
        },
        insert() {
            var unit = {};
            unit["name"] = this.name;
            this.$http({
                url: "/cooperationUnit/insert",
                method: "post",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded; charset=UTF-8"
                },
                params: unit
            })
                .then(response => {
                    this.$message({
                        message: response.data.message,
                        type: "success"
                    });
                    this.getUnits();
                    this.insertVisible = false;
                    this.name = "";
                })
                .catch(err => err);
        },
        update() {
            this.$http({
                url: "/cooperationUnit/update",
                method: "post",
                headers: {
                    "Content-Type":
                        "application/x-www-form-urlencoded; charset=UTF-8"
                },
                params: this.currentUnit
            })
                .then(response => {
                    this.$message({
                        message: response.data.message,
                        type: "success"
                    });
                    this.getUnits();
                    this.updateVisible = false;
                })
                .catch(err => err);
        },
        // 根据id编辑动态
        handleEdit(id) {
            this.updateVisible = true;
            this.$http("/cooperationUnit/getUnitById?id=" + id).then(
                response => {
                    this.currentUnit = response.data;
                }
            );
        },
        // 根据ID删除动态
        handleDelete(id) {
            this.$confirm("确认删除？删除后不可恢复！", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this.$http("/cooperationUnit/delete?id=" + id)
                        .then(response => {
                            this.$message({
                                type: "success",
                                message: response.data.message
                            });
                            this.getUnits();
                        })
                        .catch(err => err);
                })
                .catch(() => {});
        },
        // 改变当前的页码
        changeCurrent(currentPage) {
            this.currentPage = currentPage;
        },
        // 改变当前的显示条数
        changeSize(pageSize) {
            this.pageSize = pageSize;
        }
    },
    mounted() {
        this.getUnits();
    }
};
</script>

<style>
</style>